<template>
  <el-dialog
    title="打招呼和添加好友设置"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="700px">
    <el-form ref="setFriendForm" label-position="left" :rules="rules" :model="form" label-width="110px" size="small">
      <el-form-item label="打招呼时段：" prop="timeRange">
        <el-time-picker
          is-range
          v-model="form.timeRange"
          range-separator="至"
          start-placeholder="开始时间"
          format="HH:mm"
          value-format="HH:mm"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>

      </el-form-item>
      <el-form-item label="打招呼间隔：">
        <div class="row-item-interval">
          <div class="interval">
            <el-form-item prop="helloTimeIntervalMin" class="spacing">
              <el-input v-model="form.helloTimeIntervalMin" class="input" type="number"  :min="0"/>
            </el-form-item>
            <span>~</span>
            <el-form-item prop="helloTimeIntervalMax" class="spacing">
              <el-input v-model="form.helloTimeIntervalMax" class="input" type="number"  :min="0"/>
            </el-form-item>
            分钟
          </div>
          <span style="color: rgba(0, 0, 0, 0.45);">
            （每个企微号添加好友时，打招呼的时间间隔）
          </span>
        </div>
      </el-form-item>
      <div class="row-line"/>
      <el-form-item label="自动重新添加：">
        <el-switch v-model="form.autoReadd"></el-switch>
      </el-form-item>
      <el-form-item label="客户未通过好友" v-if="form.autoReadd">
        <div class="row-item-interval">
          <div class="interval">
            <el-input class="input" v-model="form.autoReaddTimeInterval" type="number" :min="0" :max="100"/>
            小时后重新添加
          </div>
        </div>
      </el-form-item>
      <el-form-item label="最多重新添加：" v-if="form.autoReadd">
        <div class="row-item-interval">
          <div class="interval">
            <el-input class="input" v-model="form.autoReaddMaxRetry" type="number" :min="0" :max="100"/>
            次
          </div>
          <span style="color: rgba(0, 0, 0, 0.45);">
            （不含首次）
          </span>
        </div>
      </el-form-item>
      <div class="row-line"/>
      <el-form-item label="打标签设置:">
        <div class="row-item-interval">
          <div class="interval">
            <el-switch v-model="form.autoTagOnlyToPhonenumber"></el-switch>
            仅手机号搜索添加打标签
          </div>
          <div style="color: rgba(0, 0, 0, 0.45);">
            开启后，好友通过后，只针对来源为手机号搜索添加的客户执行打标签。如不开启，不判断好友来源，全部执行打标签
          </div>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">取 消</el-button>
      <el-button type="primary" @click="onSubmit('setFriendForm')">保存设置</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {reqAddFriendHelloConfig, addHelloConfig, editHelloConfig} from '@/api/addFriend/index'
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      dialogType: 'add',
      form: {
        timeRange: null,
        corpId: null,//公司id
        helloTimeStartHour: null,//开始时
        helloTimeStartMinute: null,//开始分
        helloTimeEndHour: null,//结束时
        helloTimeEndMinute: null,//结束分
        helloTimeIntervalMin: null,//时间间隔最小值
        helloTimeIntervalMax: null,//时间间隔最小值
        autoReadd: null,//是否自动添加
        autoReaddTimeInterval: null,//重新添加小时
        autoReaddMaxRetry: null,//重新添加--次数
        autoTagOnlyToPhonenumber: null,
      },
      rules: {
        timeRange: [
          {required: true, message: '请选择时间范围', trigger: 'change'}
        ],
        helloTimeIntervalMin: [
          {required: true, message: '请补充完整', trigger: 'blur'}
        ],
        helloTimeIntervalMax: [
          {required: true, message: '请补充完整', trigger: 'blur'}
        ],

      }
    };
  },
  computed: {
    // 使用对象展开运算符将此getter映射到局部计算属性
    ...mapGetters([
      'enterpriseId' // 假设这是你想要监听的getter的名字
    ]),
  },
  created() {
    this.getAddFriendHelloConfig();
  },
  watch: {
    'form.autoReadd'(val) {
      if (!val) {
        this.form.autoReaddTimeInterval = null;//重新添加小时
        this.form.autoReaddMaxRetry = null;//重新添加--次数
      }
    }
  },
  methods: {
    getAddFriendHelloConfig() {
      reqAddFriendHelloConfig(this.enterpriseId).then(res => {
        console.log('获取配置----', res);
        if (!res.data) {
          this.dialogType = 'add'
        } else {
          this.dialogType = 'edit';
          this.form = res.data;
          this.form.autoReadd = this.form.autoReadd == 1 ? true : false;
          this.form.autoTagOnlyToPhonenumber = this.form.autoTagOnlyToPhonenumber == 1 ? true : false;
          this.form.timeRange=[`${this.form.helloTimeStartHour}:${this.form.helloTimeStartMinute}`,`${this.form.helloTimeEndHour}:${this.form.helloTimeEndMinute}`]
          delete this.form.corpName;
          delete this.form.sysUserId;
        }
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    },
    onSubmit(formName) {
      console.log('timeRange', this.form.timeRange);
      if (this.form.helloTimeIntervalMax < this.form.helloTimeIntervalMin || this.form.helloTimeIntervalMin == this.form.helloTimeIntervalMax) {
        this.$message.warning('请填写正确时间间隔');
      }
      if (this.form.timeRange && this.form.timeRange.length > 0) {
        this.form.helloTimeStartHour = this.form.timeRange[0].split(":")[0];
        this.form.helloTimeStartMinute = this.form.timeRange[0].split(":")[1];
        this.form.helloTimeEndHour = this.form.timeRange[1].split(":")[0];
        this.form.helloTimeEndMinute = this.form.timeRange[1].split(":")[1];
        console.log('form', this.form);
      }

      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {

          this.form.autoReadd = this.form.autoReadd ? 1 : 0;
          this.form.autoTagOnlyToPhonenumber = this.form.autoTagOnlyToPhonenumber ? 1 : 0;
          let url = '';
          if (this.dialogType == 'add') {
            //添加
            this.form.corpId = this.enterpriseId;
            url = addHelloConfig;
          } else {
            //编辑
            url = editHelloConfig;
          }
          let form = JSON.parse(JSON.stringify(this.form));
          delete form.timeRange;
          url(form).then(res => {
            this.$modal.msgSuccess('操作成功！');
            this.handleCloseDialog()//关闭窗口
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onClose() {
      this.$emit('onClose');
    }
  },
};
</script>
<style lang="scss" scoped>
.row-item-interval {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 22px;

  .interval {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    gap: 8px;

    .input {
      width: 78px;
      height: 30px;
    }
  }
}

.row-line {
  margin: 20px auto;
  box-sizing: border-box;
  padding: 0;
  color: rgba(0, 0, 0, .65);
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum", "tnum";
  border-top: 1px solid rgba(0, 0, 0, .06);
}
::v-deep .spacing {
  margin-bottom: 0px !important;
}
</style>
